<!DOCTYPE html>
<html>
<head>
<title>Optical Path Diagram</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  canvas {
    border: 1px solid #ccc;
    background-color: white;
  }
</style>
</head>
<body>
<canvas id="physicsCanvas"></canvas>
<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');

  canvas.width = 800;
  canvas.height = 350;

  // --- Parameters ---
  const y_axis = canvas.height / 2;
  const x_object = 140;
  const x_aperture_stop = 240;
  const x_lens_center = 265;
  const x_image = 720;

  const plane_half_height = 40;
  const image_plane_half_height = 70;

  const lens_half_width = 20;
  const lens_half_height = 70;
  
  const aperture_half_height = 55;
  const stop_height = 15;
  const stop_width = 5;

  // --- Helper function to draw arrows ---
  function drawArrow(ctx, fromx, fromy, tox, toy) {
    const headlen = 10; // length of head in pixels
    const dx = tox - fromx;
    const dy = toy - fromy;
    const angle = Math.atan2(dy, dx);
    ctx.moveTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
    ctx.moveTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
  }
  
  // --- Drawing ---
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';
  

  // 1. Draw Optical Axis
  ctx.beginPath();
  ctx.lineWidth = 2;
  ctx.moveTo(50, y_axis);
  ctx.lineTo(770, y_axis);
  ctx.stroke();

  // 2. Draw Object Plane 'A'
  ctx.beginPath();
  ctx.moveTo(x_object, y_axis - plane_half_height);
  ctx.lineTo(x_object, y_axis + plane_half_height);
  ctx.stroke();
  ctx.font = 'bold 24px sans-serif';
  ctx.fillText('A', x_object - 30, y_axis - plane_half_height - 5);

  // 3. Draw Image Plane 'A''
  ctx.beginPath();
  ctx.moveTo(x_image, y_axis - image_plane_half_height);
  ctx.lineTo(x_image, y_axis + image_plane_half_height);
  ctx.stroke();
  ctx.font = 'bold 24px sans-serif';
  ctx.fillText("A'", x_image + 10, y_axis - image_plane_half_height - 5);

  // 4. Draw Lens 'L'
  ctx.beginPath();
  ctx.moveTo(x_lens_center, y_axis - lens_half_height);
  ctx.quadraticCurveTo(x_lens_center + lens_half_width, y_axis, x_lens_center, y_axis + lens_half_height);
  ctx.quadraticCurveTo(x_lens_center - lens_half_width, y_axis, x_lens_center, y_axis - lens_half_height);
  ctx.fillStyle = 'rgba(211, 211, 211, 0.6)';
  ctx.fill();
  ctx.lineWidth = 1.5;
  ctx.stroke();
  ctx.fillStyle = 'black';
  ctx.font = 'bold 24px sans-serif';
  ctx.fillText('L', x_lens_center - 8, y_axis - lens_half_height - 15);

  // 5. Draw Aperture Stop
  ctx.fillStyle = 'black';
  ctx.fillRect(x_aperture_stop - stop_width / 2, y_axis - aperture_half_height - stop_height, stop_width, stop_height);
  ctx.fillRect(x_aperture_stop - stop_width / 2, y_axis + aperture_half_height, stop_width, stop_height);
  
  // 6. Draw Rays
  ctx.beginPath();
  ctx.lineWidth = 2;
  // Top ray path
  ctx.moveTo(x_object, y_axis);
  ctx.lineTo(x_lens_center, y_axis - aperture_half_height);
  ctx.lineTo(x_image, y_axis);
  // Bottom ray path
  ctx.moveTo(x_object, y_axis);
  ctx.lineTo(x_lens_center, y_axis + aperture_half_height);
  ctx.lineTo(x_image, y_axis);
  ctx.stroke();

  // Arrows on refracted rays
  const t_arrow = 0.35;
  const arrow_x = (1 - t_arrow) * x_lens_center + t_arrow * x_image;
  const arrow_y_top = (1 - t_arrow) * (y_axis - aperture_half_height) + t_arrow * y_axis;
  const arrow_y_bot = (1 - t_arrow) * (y_axis + aperture_half_height) + t_arrow * y_axis;
  const dt = 0.05;
  const arrow_x_prev = (1 - t_arrow - dt) * x_lens_center + (t_arrow - dt) * x_image;
  const arrow_y_top_prev = (1 - t_arrow - dt) * (y_axis - aperture_half_height) + (t_arrow - dt) * y_axis;
  const arrow_y_bot_prev = (1 - t_arrow - dt) * (y_axis + aperture_half_height) + (t_arrow - dt) * y_axis;

  ctx.beginPath();
  ctx.lineWidth = 2;
  drawArrow(ctx, arrow_x_prev, arrow_y_top_prev, arrow_x, arrow_y_top);
  drawArrow(ctx, arrow_x_prev, arrow_y_bot_prev, arrow_x, arrow_y_bot);
  ctx.stroke();
  
  // 7. Draw Angle 'α'
  const alpha_rad = Math.atan(aperture_half_height / (x_lens_center - x_object));
  const r_alpha = 50;
  ctx.beginPath();
  ctx.lineWidth = 1.5;
  ctx.arc(x_object, y_axis, r_alpha, 0, -alpha_rad, true); // true for counter-clockwise
  ctx.stroke();

  ctx.font = 'italic 22px serif';
  ctx.fillText('α', x_object + 40, y_axis - 18);

</script>
</body>
</html>